<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base />
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/jquery.datePicker.css" type="text/css"/>
    <link href='<c:out value="${ctx}"/>/styles/style1.css' rel="stylesheet" type="text/css" />
    <link href='<c:out value="${ctx}"/>/styles/demo_table_jui.css' rel="stylesheet" type="text/css" />
    <link href='<c:out value="${ctx}"/>/styles/jquery-ui-1.7.2.custom.css' rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript" src='<c:out value="${ctx}"/>/js/jquery/jquery.js'></script>
	<script type="text/javascript" language="javascript" src='<c:out value="${ctx}"/>/js/jquery/jquery.dataTables.js'></script>
	<script type="text/javascript" language="javascript" src="<c:out value="${ctx}"/>/js/jquery/date.js"></script>
	<script type="text/javascript" language="javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.datePicker.js"></script>
	<script type="text/javascript" language="javascript" src="<c:out value="${ctx}"/>/js/escape_utf8.js"></script>
	<script type="text/javascript">
		var oStat;        // 宣告為global變數
		var oDetail;
		var dataStat = null;
		var dataDetail = null;
		function buildTable(tableData) {
			if ($('select[name="info_type"]').val() == "stat") {
				dataStat = tableData;
				oStat.fnClearTable(0);    // 等同html("")
		    	//add the table rows
				$.each(tableData, function(i){		
					oStat.fnAddData([		
				    	tableData[i].cityname,
				    	tableData[i].bookname,
				    	tableData[i].downtime,
				    	tableData[i].times,
				    	tableData[i].quantity
					]);
				});
			} else {
				
				dataDetail = tableData;
				oDetail.fnClearTable(0);    // 等同html("")
		    	//add the table rows
				$.each(tableData, function(i){	
					//alert(i + ":" + tableData[0].starttime);
					oDetail.fnAddData([		
				    	tableData[i].cityname,
				    	tableData[i].bookname,
				    	tableData[i].starttime,
				    	tableData[i].from_ip,
				    	tableData[i].free_flag,
				    	tableData[i].booksize
					]);
				});
			}
			oTable.fnDraw();           // 重新繪製
		};

		function querySubmit() {
			dataString = $("#mainForm").serialize();
			$.ajax({
				url: '<c:out value="${ctx}"/>/ajaxZipDownLogQuery.do',
				type: 'POST',
				data: dataString,
				dataType: 'json',
				success: function(data, status){
					buildTable(data);
				},
				error: function(xhrInstance, status, xhrException) {
					alert("failure:" + status);
				}
			});
			return false;
		}		
		
		

		function exportSubmit() {
			/*
			var tableData = null;
			if ($('select[name="info_type"]').val() == "stat") {
				if (dataStat == null) {
					alert("統計尚未查詢!!");
					return;
				}
				tableData = dataStat;
			} else {
				if (dataDetail == null) {
					alert("明細尚未查詢!!");
					return;
				}
				tableData = dataDetail;
			}
			var data = [];
			for (var i=0; i<tableData.length; i++) {
				var line = [];
				var rec = tableData[i];
				if ($('select[name="info_type"]').val() == "stat") {
					line.push(rec.cityname);
					line.push(rec.bookname);
					line.push(rec.downtime);
					line.push(rec.times);
				} else {
					line.push(rec.cityname);
					line.push(rec.bookname);
					line.push(rec.starttime);
					line.push(rec.from_ip);
					line.push(rec.free_flag);
					line.push(rec.booksize);
				}
				data.push(line.join(','));
			}
			var exportData = escape(data.join("!;"));
			window.location.href = '<c:out value="${ctx}"/>/ajaxZipDownLogCSV.do?csv=' + exportData; */
			//var dataString = $("#mainForm").serialize();
			// $.post('<c:out value="${ctx}"/>/ajaxZipDownLogCSV.do', dataString, function(data) {alert(data); });
			$('#mainForm').attr('action', '<c:out value="${ctx}"/>/ajaxZipDownLogCSV.do');
			window.location.href = 'javascript:document.mainForm.submit()';
			return true;
		}
		/**
		 * Ready to DataTable Grid
		 */
		$(document).ready(function() {
			oStat = $('#stat_grid').dataTable({
				"sProcessing": "處理中...",
				"bJQueryUI": true,
				"sPaginationType": "full_numbers",
				"aoColumnDefs": [{
			        "sClass": "align_right",
        			"aTargets": [3, 4]
     		 	}],
				"aaSorting": []
			});
			
			oDetail = $('#detail_grid').dataTable({
				"bJQueryUI": true,
				"sPaginationType": "full_numbers",
				"aaSorting": []
			});
			
			
			Date.format = 'yyyy/mm/dd';
			$('td input[name$="_date"]').datePicker({startDate:'1996-01-01'});
			$('td input[name$="_date"]').each(function() {
				if ($(this).val().length > 10) {
					$(this).attr('value', $(this).val().substring(0, 10));
				}
			}); 
			
			$('select[name="info_type"]').change(function() {
				if ($(this).val() == "detail") {
					$('#divStat').hide();
					$('#divDetail').show();
				} else {
					$('#divStat').show();
					$('#divDetail').hide();
				}
			});
		} );	// end ready function
	</script>
    <title>下載統計查詢</title>
</head>

<body>
<div id="dt_example">
<form id="mainForm" method="post" name="mainForm">
	<div id="Categories" class="queryarea">
   	<table id="shopping_list" width="100%" border="0">
	    <tr>
	      <th  class="th" colspan="6"> 查詢區(請輸入條件)</th>
	    </tr>
	    <tr>
	      <td width="15%">書城名稱：</td>
	      <td width="20%">
	      	  <html:select property="city_id" name="lazyForm" >
	            <html:option value=""></html:option>     
    			<html:optionsCollection name="lazyForm" label="cityname" value="id"  property="bookcities"/>  
	     	  </html:select>
	      </td>
	      <td width="20%">書名：</td>
	      <td width="45%" ><html:text property="bookname" size="40" name="lazyForm"/></td>	     
	    </tr>
	    <tr>
	      <td>免費：</td>
	      <td>
	      	免費<html:checkbox name="lazyForm" property="free_flag" value="0" />
	      	付費<html:checkbox name="lazyForm" property="free_flag" value="1" />
	      </td>
	      <td>IP(或Host)：</td>
	      <td><html:text property="from_ip" size="40" name="lazyForm"/></td>
	    </tr>   
	    <tr>
	      <td>資訊類型：</td>
	      <td>
	      	<html:select name="lazyForm" property="info_type">
				<html:option value="stat">統計</html:option>
				<html:option value="detail">明細</html:option>
			</html:select>
	      </td>
	      <td>下載日期區間：</td>
	      <td>
	      	<html:text name="lazyForm" property="start_date" size="10"/>
	      	<html:text name="lazyForm" property="end_date" size="10"/>
	      </td>
	    </tr>   
	    <tr>
	      <th colspan="6" class="td1">
	        <input type="button" name="query" id="query" onclick="querySubmit()" value="查詢" />
	        <input type="button" name="export" id="export" onclick="exportSubmit()" value="匯出" />
	      </th>
	    </tr>
  	</table>
	</div>
</form>
<div id="container">
<div class="demo_jui" id="divDetail" style="display:none">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="detail_grid">
	<thead>
		
		<tr>
			<th>書名</th>
			<th>書城</th>
			<th>下載時間</th>
			<th>IP/Host</th>
			<th>免費</th>
			<th>Size(KB)</th>
		</tr>
	</thead>
	<tbody id="tableBody">
	</tbody>
</table>
</div>

<div class="demo_jui" id="divStat">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="stat_grid">
	<thead>
		<tr>
			<th>書城</th>
			<th>書名</th>
			<th>下載日期</th>
			<th>下載次數</th>
			<th>下載量(KB)</th>
		</tr>
	</thead>
	<tbody id="statBody">
	</tbody>
</table>
</div>

</div>
</div>

</body>
</html:html>
